<template>
  <div class="container">
    <header>
      <div class="title">用户登录</div>
    </header>

    <ul class="userform">
      <li>
        <div>手机号码:</div>
        <input type="text" placeholder="手机号码" v-model="userId" />
      </li>
      <li>
        <div>密码:</div>
        <input type="password" placeholder="密码" v-model="password" />
      </li>
    </ul>

    <div class="login-btn" @click="doLogin">
      <button>登录</button>
    </div>
    <div class="register-btn" @click="toRegister">
      <button>去注册</button>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../components/Footer";
export default {
  name: "Login",
  data() {
    return {
      userId: "",
      password: ""
    };
  },
  components: {
    Footer
  },
  methods: {
    doLogin() {
      this.$axios
        .post(
          "/UserController/getUserByIdByPass",
          this.$qs.stringify({
            userId: this.userId,
            password: this.password
          })
        )
        .then(response => {
          if (response.data == null) {
            alert("用户名或密码错误");
          } else {
            //将登录成功后获取到的user对象，存入sessionStorage
            this.$setSessionStorage("user", response.data);
            this.$router.go(-1);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    toRegister() {
      this.$router.push("/register");
    }
  }
};
</script>

<style scoped>
/* *********************** header 部分 ***************************** */
.container header {
  width: 100%;
  height: 12vw;
}
.container header .title {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  text-align: center;
  line-height: 12vw;
  color: white;
  font-size: 4.8vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
/* *********************** 输入框 部分 ***************************** */
.container .userform li {
  box-sizing: border-box;
  padding: 4vw 3vw 0;
  display: flex;
  font-size: 3vw;
}
.container .userform li div {
  color: #666;
  font-weight: bold;
  flex: 0 0 18vw;
}
.container .userform li input {
  border: none;
  outline: none;
  flex: 1;
  height: 4vw;
}
/* *********************** 按钮 部分 ***************************** */
.container .login-btn,
.register-btn {
  box-sizing: border-box;
  padding: 4vw 3vw 0;
}
.container .login-btn button,
.register-btn button {
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: bold;
  color: white;
  background-color: #38ca73;
  border: none;
  outline: none;
  border-radius: 4px;
}
.container .register-btn button {
  color: #666;
  background-color: #eee;
}
</style>